<!DOCTYPE html>
<html lang="en">
    <head>
        <title>用户列表</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="../../static/css/base.css"/>
        <link rel="stylesheet" type="text/css" href="../../static/js/elementUI/index.css"/>
        <link rel="stylesheet" type="text/css" href="../../static/js/elementUI/indexfont.css"/>
        <link rel="stylesheet" type="text/css" href="../../static/js/elementUI/docs.bbc11ec.css"/>
        <script src="../../static/js/lib/require.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../static/js/require-config.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../static/js/user/userList.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .bg-purple {
                background: #d3dce6;
            }

            .grid-content {
                border-radius: 4px;
                min-height: 36px;
            }

            .row-bg {
                padding: 10px 0;
                background-color: #f9fafc;
            }

            .el-select .el-input {
                width: 110px;
            }
        </style>
    </head>
    <body>
        <div id="userList" v-cloak>
            <el-row>
                 
                     <el-col :xs="24" :sm="24" :md="12" :lg="12">
                        <el-input placeholder="请输入内容" v-model="keyword">
                            <el-select v-model="page.field" slot="prepend" placeholder="请选择">
                                <el-option label="主鍵" value="id"></el-option>
                                <el-option label="名字" value="userName"></el-option>
                                <el-option label="拼音" value="userNameEn"></el-option>
                                <el-option label="帐号" value="account"></el-option>
                                <el-option label="性别" value="sex"></el-option>
                                <el-option label="邮箱" value="email"></el-option>
                                <el-option label="创建时间" value="createTime"></el-option>
                            </el-select>
                            <el-button slot="append" icon="search" @click="setKeyword"></el-button>
                        </el-input>
                     </el-col>
                 
                
                    <el-col :xs="12" :sm="6" :md="4" :lg="3">
                        <el-button type="primary" @click="handleAdd">新增</el-button>
                       <el-button type="danger" @click="handleDeletes">批量删除</el-button>
                      </el-col>
                 
               
                    
                
            </el-row>
            <el-row type="flex" justify="center" style="margin-top:10px;">
                <el-col :span="24">
                    <div class="grid-content bg-purple">
                        <template>
                            <el-table :data="tableData" :border="true" style="width:100%" :fit="true" @selection-change="getCheck" @sort-change="sortChange">
                                <el-table-column width="55" type="selection"></el-table-column>
                                <el-table-column prop="seq" show-overflow-tooltip label="序号"  width="100"></el-table-column>
                               <!--  <el-table-column prop="id" show-overflow-tooltip label="主鍵" sortable width="200"></el-table-column> -->
                                <el-table-column prop="userName" show-overflow-tooltip label="名字" sortable="custom"></el-table-column>
                                 <el-table-column prop="organizName" show-overflow-tooltip label="组织" ></el-table-column>
                                <el-table-column prop="roleName" show-overflow-tooltip label="角色" ></el-table-column>
                                <el-table-column prop="userNameEn" show-overflow-tooltip label="拼音" sortable="custom"></el-table-column>
                                <el-table-column prop="account" show-overflow-tooltip label="帐号"></el-table-column>
                                <el-table-column prop="sex" show-overflow-tooltip label="性别" width="70"></el-table-column>
                                <el-table-column prop="email" show-overflow-tooltip label="邮箱"></el-table-column>
                                <el-table-column prop="createTime" show-overflow-tooltip label="创建时间" sortable width="184"></el-table-column>
                                <el-table-column label="操作" show-overflow-tooltip>
                                    <template scope="scope">
                                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-col>
            </el-row>
            <!-- 菜单的添加、编辑对话框窗口 -->
            <el-dialog :title="bmsUserTitle" :visible.sync="bmsUserVisible">
                <el-form :model="user" :rules="userRule" ref="userForm">
                    <el-form-item label="主鍵" :label-width="formLabelWidth" v-if="isShowUserId">
                        <el-input v-model="user.id" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                     
                    <el-form-item label="名字" :label-width="formLabelWidth">
                        <el-input v-model="user.userName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="组织" :label-width="formLabelWidth">
			 		   <el-cascader 
						 placeholder="对菜单进行搜索"
					    :options="orgData"
					    :props="organizDefaultProps"
					    filterable 
					    v-model="organizDefalut"
					    
					    change-on-select
					    @change="getSelectNode"
						  >
			          </el-cascader>
			    </el-form-item>
			    <el-form-item label="角色" :label-width="formLabelWidth">
			 		   <el-cascader 
						 placeholder="对菜单进行搜索"
					    :options="roleData"
					    :props="roleDefaultProps"
					    filterable 
					    v-model="roleDefalut"
					    change-on-select
					    @change="getRoleNode"
						  >
			          </el-cascader>
			    </el-form-item>
                    <el-form-item label="拼音" :label-width="formLabelWidth">
                        <el-input v-model="user.userNameEn" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="帐号" :label-width="formLabelWidth" prop="account">
                        <el-input v-model="user.account" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth" v-if="status == 0" prop="password">
                        <el-input v-model="user.password" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" :label-width="formLabelWidth" v-if="status == 0" prop="confirmPass">
                        <el-input v-model="user.confirmPass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-input v-model="user.sex" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input v-model="user.email" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" :label-width="formLabelWidth" v-if="isShowCreateTime">
                        <el-input v-model="user.createTime" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="bmsUserVisible = false" v-cloak>取 消</el-button>
                    <el-button type="primary" @click="saveUser" v-cloak>确 定</el-button>
                </div>
            </el-dialog>
            <el-row  style="margin-top:10px" type="flex" justify="end">
               <el-col :xs="24" :sm="24" :md="12" :lg="12">
                    <div class="grid-content bg-purple">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNumber" :page-sizes="[10,20,50,100]" :page-size="page.pageSize" layout="sizes,prev,pager,next,total" :total="page.recordCount"></el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </body>
</html>
